<template>
	<view class="classlist">
		<view class="content">
			<navigator :url="`/pages/preview/preview?index=${index+1}`" v-for="(item, index) in detailList" :key="item"
				class="item">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<uni-load-more v-if="loading" style="margin: 10rpx 0 40rpx 0" status="loading"></uni-load-more>
		<view v-else class="text has-no-more">到底了~</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		reqDetailByClassifyId
	} from '@/apis/classify.js'
	import {
		reqMyDownloadOrMyScore
	} from '@/apis/user.js'
	import useClassifyStore from '@/pinia/modules/classify.js'

	let classifyStore = useClassifyStore()
	let detailList = ref([])
	let loading = ref(true)
	let searchForm = ref({
		pageNum: 1,
		pageSize: 12,
		classid: ''
	})
	// 获取传递的ID
	onLoad(options => {
		let {
			id,
			name,
			type
		} = options
		if (id) {
			searchForm.value.classid = options.id
		} else {
			searchForm.value.type = options.type
		}
		// 动态修改顶部导航
		uni.setNavigationBarTitle({
			title: name
		})
		initList()
	})
	const initList = async () => {
		const {
			data
		} = searchForm.value.type ? await reqMyDownloadOrMyScore(searchForm.value) : await reqDetailByClassifyId(searchForm
			.value)
		if (!data || data.length == 0 || data.length < searchForm.value.pageSize) {
			loading.value = false
		}
		detailList.value = [...detailList.value, ...data]
		// 存储
		classifyStore.setClassifyList([...detailList.value])

	}
	onReachBottom(() => {
		if (!loading.value) {
			return
		}
		searchForm.value.pageNum++
		initList()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		detailList.value = []
		searchForm.value.pageNum = 1
		initList()
		uni.stopPullDownRefresh()
	})
</script>
<style lang="scss" scoped>
	.content {
		padding: 15rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15rpx;

		.item {
			width: 100%;
			border-radius: 10rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 430rpx;
				display: block;
			}
		}
	}

	.has-no-more {
		text-align: center;
		color: $text-font-color-3;
		line-height: 100rpx;
	}
</style>